<template>
  <div id="labelUserList">
    <!--上部搜索条件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:userTag:addTag'"
        type="warning"
        icon="el-icon-plus"
        @click="createLabelUser()"
      >
        创建标签用户
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="用户ID"
        prop="userId"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="大鹏号"
        prop="dapengAccount"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="用户名"
        prop="nickname"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="手机号"
        prop="mobile"
        min-width="120"
      ></el-table-column>
      <el-table-column
        label="标签数"
        prop="counts"
        min-width="160"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="checkLabel(scope.row.userId)">
            查看标签
          </el-button>
          <el-button
            v-permission="'wh:system:userTag:addUserTag'"
            type="text"
            @click="addLabel(scope.row.userId)"
          >
            添加标签
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <!-- 添加标签 dialog -->
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @showError="showError"
    ></dialogAddEdit>

    <!-- 创建用户标签 dialog -->
    <dialogCreateLab
      v-if="dialogForCreate.isShow"
      :dialog-data="dialogForCreate"
      @showError="showError"
      @refresh="refresh"
    ></dialogCreateLab>
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      :from="showDownLoad ? from : ''"
    ></errorDialog>
  </div>
</template>

<script>
import { getLabelList } from '@/api/lableManage/labelUser' // 接口
import topSearch from '@component/lableManage/labelUser/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/lableManage/labelUser/dialogAddEdit' // 新增标签
import dialogCreateLab from '@component/lableManage/labelUser/dialogCreateLab' // 创建标签用户
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'userTagsManage',
  msg: '用户标签管理',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAddEdit,
    dialogCreateLab,
    errorDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      tableData: [],
      // 搜索条件
      formInline: {
        conditions: '',
        tagsNumber: undefined,
        searchType: '',
        searchContent: ''
      },
      // 弹框组for 添加标签
      dialogData: {
        isShow: false,
        userId: ''
      },
      // 弹框组for 创建用户标签
      dialogForCreate: {
        isShow: false
      },
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      from: '', //tagManageDp,tagManage
      showDownLoad: false, //是否显示“下载失败数据”按钮
      multipleSelection: [] // 选中的行
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getLabelList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    // 创建用户标签
    createLabelUser() {
      this.dialogForCreate.isShow = true
    },
    // 查看标签
    checkLabel(id) {
      this.$router.push({
        name: 'wh:lableManage:labelUser:checkLabel:checkLabelList',
        params: { id }
      })
    },
    // 添加标签
    addLabel(id) {
      this.dialogData.isShow = true
      this.dialogData.userId = id
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 导入失败弹窗 */
    showError(text, from, res) {
      this.from = from
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
      this.showDownLoad = res.identification
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#rolesManage {
  height: 100%;
  .bottom-box {
    position: relative;
    height: calc(~'100% - 40px');

    .table-conBtn {
      padding-left: 30px !important;
    }

    .left-tree {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      /*  background: #8cc5ff;*/
      width: 192px;
      height: calc(~'100% - 20px');
      overflow: hidden;

      &.hide-tree {
        width: 12px;
      }

      span.btn-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        width: 12px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #ddd;
        cursor: pointer;

        &:hover {
          background: #ff8c00;
        }
      }
    }

    .table {
      &.hide-tree {
        margin-left: calc(~'12px + 20px');
      }
    }
  }
}
</style>
